//首页的less样式文件
@import "common";
// @import 可以把一个样式文件导入到另外一个样式文件里面
//link 是把一个样式文件引入到html页面里面

body {

	min-width: 320px;
	/* 最小的宽度 */
	max-width: 15rem;
	/* 最大宽度 不必要设置 */
	margin: 0 auto;
	/* 字体样式，不是苹果用后面 的字体 */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: (30rem /@baseFont);
	line-height: 1.5;
	background-color: skyblue;
}



img {
	border: none;
	display: block;
}


ul,p {
	margin: 0;
	padding: 0;
	list-style: none;
}


a {
	text-decoration: none;
	color: #000;
	background-color: transparent;
}

li{
	list-style: none;
}
@baseFont: 50;
/* 顶部第一块 */
.top-one
	{
	 /* 高度先写死 */
	 // top:0;
	 z-index: 3;
	 position: relative;
	 width: 15rem;
	 /* 让他始终在最上面*/
	 position: fixed;
	 background-color: #fff;
	 height: (90rem/@baseFont);
	 
	 ul>li {
	 float: left;
	 height: (100rem/@baseFont);
	 line-height: (90rem/@baseFont);
	 background-color: #fff;
	 text-align: center;
	 a>span{
		color: #000;
		
	 }
	 .box{
	
		margin-left: (10rem/@baseFont);
		margin-top: (20rem/@baseFont);
	
		width: (325rem/@baseFont);
		height: (45rem/@baseFont);
		border: (1rem/@baseFont) solid rgb(246, 200,110) ;
		border-radius: (50rem/@baseFont);
		background-color: rgb(246, 200,110);	
		text-align: center;
		
		span:nth-child(1){
			position: absolute;
			font-size: (30rem/@baseFont);
			left: (40rem/@baseFont);
			top: 0;
	
		}
		span:nth-child(2) {
		position: absolute;
		
		left: (270rem/@baseFont);
		top: 0;
		
		font-size: (35rem/@baseFont);
		}
	  }
	 }


		

	
	  ul li:nth-child(1) {
	  width: 70%;
	  }
	


      ul li:nth-child(2) {
	  width: 10%;
	  }

	  ul li:nth-child(2) span {
	  float: right;
      padding-right: (20rem/@baseFont);
	  font-size: (50rem/@baseFont);
	 }

	  ul li:nth-child(3) {
	
	  width: 10%;
	  }

	  ul li:nth-child(3) span {
	  font-size: (60rem/@baseFont);
	  float: right;
	  padding-right: (15rem/@baseFont);
	  }
	
	  ul li:nth-child(4) {
	  width: 10%;
	  color: #ebebeb;

	 }
	  ul li:nth-child(4) span {
	  float: right;
	  padding-right: (10rem/@baseFont);
	 font-size: (60rem/@baseFont);

	  }
    }



/* 顶部第二块 */
/* 头像+基本信息+空间*/
/* 顶部第一块 */


.top-two {
	position: relative;
	z-index: 3;
	/* flex布局 */
	width: 100%;
	display: flex;
	position: fixed;
	
	margin-top: (100rem /@baseFont);
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	height: (170rem /@baseFont);
	background-color: #fff;
	
	/* 头像信息 */
	.search-touxiang{
		width: 20%;
		position: relative;
		height: (100rem/@baseFont);
		width: (100rem/@baseFont);
		text-align: center;
		
	
	 span{
		
		position: absolute;
		top: -(16rem/@baseFont);
		left: (10rem/@baseFont);
		font-size: (130rem/@baseFont);
	 }
	
	}
	
	
	/* 基本信息 */
	.normalinfor{
	
		width: 60%;
		height: (160rem/@baseFont);
		margin-top: (10rem/@baseFont);
		margin-left: (45rem/@baseFont);

		// text-align: center;
		.infor{
			// position: relative;
			height: (50rem/@baseFont);

				
		}
		/* 基本信息-1 */
		
		.infor-one{
			/* 文字居中 */
			display: flex;
			// position: relative;
			font-weight: bolder;
			
		 .left{
			// float: left;
			height: (50rem/@baseFont);
			border-radius: (10rem/@baseFont);
			background-color:rgba(224, 224, 225, 0.7);
			
			span:nth-child(1){
				letter-spacing: (2rem/@baseFont);
				margin-left: (10rem/@baseFont);
	
				}
			}

			.right{
				position: relative;
				height: (50rem/@baseFont);
				span{
					color:rgb(181, 186, 193);
				}
				.icon-icon-test1{
					position: absolute;
					left: (10rem/@baseFont);
					bottom: -(15rem/@baseFont);
					font-size:(50rem/@baseFont) ;
				}
			}
		
		

		}
		 
		/* 基本信息-2 */
		.infor-two{
			position: relative;
			text-align: center;
			margin-top: (10rem/@baseFont);
			width: 30%;
			border-radius: (10rem/@baseFont);
			border:(4rem/@baseFont) solid rgb(237, 112, 152);
			span{
				position: absolute;
				top: (3rem/@baseFont);
				left: (15rem/@baseFont);
				font-size: (25rem/@baseFont);
				
				
				/* 垂直居中 */
				// display: flex;
				// justify-content: center;
				// align-items: center;
				
				
				color:rgb(237, 112, 152);
			}
		}
		
		/* 基本信息-3 */
		.infor-three{
			/* 文字居中 */
			text-align: center;
			position: relative;
			span{
				color:rgb(149,153,159);
				font-size: (25rem/@baseFont);
			}
			.left{
				
				position: absolute;
				left: 0;
				
			}
			.right{
				position: absolute;
				left: (140rem/@baseFont);
			}
		}		
	
	}
	.space{
		  	width: 20%; 
			/* 垂直居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			span{			
				color:rgb(149,153,159);
				font-size: (35rem/@baseFont);
			}
	}
}

/* 成为会员部分 */
/* top第三部分 */
.top-three{
	position: relative;
	z-index: 3;
	overflow: hidden;
	  // z-index: -1;
	  width: (750rem/@baseFont);
	  //flex-wrap实现弹性盒自动换行
	  display: flex;
	  flex-wrap: wrap;
	  background-color: #fff;
	  margin-top: (270rem /@baseFont);
	  height: (200rem /@baseFont);
	  position: fixed;
      .jlist{

		/* 固定定位必须有宽度*/
		width: 15rem;
		// height: (200rem /@baseFont);
		background-color: #fff;

		.top{
			width: 100%;
			
	            display: flex;
	            /* 换行 */
	            flex-wrap: wrap; 
				background-color: #fff;
				
				
				li{
					
				    width:33%;
				    // margin-right: 5px;
				    flex-grow: 1;
				    // margin-bottom: 8px;
		
				
					border-right: (2rem/@baseFont) solid rgb(149,153,159);
					 .shuzi{
						/* 垂直居中 */
						
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #fff;
						width: 100%;
					}
					 .wenzi{
						/* 垂直居中 */
						color:rgb(149,153,159);
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						background-color: #fff;
					}
				}
	        }
		}
	 .bottom{
		
		// position: relative;
		// display: flex;
		margin-top: (15rem/@baseFont);
		width: 100%;
		height: (100rem/@baseFont);
		background-color: #fff;
		
		overflow: hidden;
		// border: (10rem/@baseFont) solid #d0d0d0;
		display: inline-block;
		
				
		flex-grow: 1;
		//防止被挤压
		flex-shrink: 0;

		.huiyuan{
			
			display: flex;
			// position: absolute;
			/* 水平垂直居中  只适用于子盒子有宽的时候*/
			margin: 0 auto;
			width: 90%;
			height: (100rem/@baseFont);
			border: (2rem/@baseFont) solid rgb(237, 112, 152);
			background-color: rgba(237, 112, 152,0.4);

			.left{
				width: 90%;
				margin-top: (8rem/@baseFont);
				margin-left: (10rem/@baseFont);
				span{
					
					font-size: (25rem/@baseFont);
					display: flex;				

				}
				.becomehy{
					color:rgb(237, 112, 152);
					font-weight: bolder;
					font-size: (30rem/@baseFont);
				}
				.quanyi{
					color:rgba(237, 112, 152,0.9);
				}

			}
			.right{
				width: 10%;

				/* 水平垂直居中 */
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-weight: bolder;
					color:rgb(237, 112, 152);
					
				}
			}
		}

	}		

	
}


/* 中间部分!!!! */

/* 文字！！！内容！！！*/
.bai{

	// position: relative;
	// z-index: -1;
	width: (750rem/@baseFont);
	height: (460rem/@baseFont);
	background-color: #fff;
}

/* 内容1 */
.content-one{
	/* 最下面置于 */
	// position: relative;
	// z-index: -1;

	overflow: hidden;
	width: 15rem;
	height: (160rem /@baseFont);
	background-color: #fff;
	text-align: center;
	
	
	.icon{
	
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	/* fill:currentColor是什么意思？ 
			          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
			          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
			           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
	fill: currentColor;
	}
	
	.bnav {
	
		/* fixed相对于浏览器窗口进行定位，正常情况下没有问题，当使用transform:translate(0px,-5px);属性后问题就出现了 */
		/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
		display: flex;
	
	 li:nth-child(1) {
		width: 25%;
	}
	
	 li:nth-child(2) {
		width: 25%;
	}
	
	 li:nth-child(3) {
		width: 25%;
	}
	
	 li:nth-child(4) {
		width: 25%;
		margin-top: (5rem /@baseFont);
	}

	svg{
		color: #000;
		margin-top: (15rem /@baseFont);
		font-size: (65rem /@baseFont);
	}
	
	p{
		
		font-size: (30rem /@baseFont);
		line-height: (50rem /@baseFont);
	}


}
}
	
/* 内容2*/
.content-two{
	
	// position: relative;
	// z-index: -1;
	overflow: hidden;
	// position: fixed;位置保持不变
	width: 15rem;
	height: (200rem /@baseFont);
	background-color: #fff;
	
	// display: flex;
	// justify-content: center;
	// align-items: center;
	.fabu{
		// position: absolute;
		display: flex;
		width: (700rem /@baseFont);
		height: (160rem /@baseFont);
		background-color: #fff;
		margin: 0 auto;
		// left: (25rem /@baseFont);
		// top: (25rem /@baseFont);
		border: (1rem /@baseFont) solid rgb(237, 112, 152);
	
		.left{
			position: relative;
			display: flex;
			flex-wrap: wrap;
			margin:10px;
			// justify-content: center;
			// align-items: center;
			
			width: 70%;
			li{
				display: flex;
				span{

					margin-top:  (10rem /@baseFont);
					font-size: (65rem /@baseFont);
					
				}

			}
			
			
			.top{
				top:-10px;
				position: absolute;
				p{
					font-weight: bolder;
					line-height: (100rem /@baseFont);
				}
			}
			.bottom{
				color: rgb(149,153,159);
				p{
				position: absolute;
				line-height: (180rem /@baseFont);
				font-size: (25rem /@baseFont);
				
				}
			}
		
		}
		.right{
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin:(50rem /@baseFont) (20rem /@baseFont);
			border-radius: (50rem /@baseFont);
			background-color: rgb(237, 112, 152);
			border: (1rem /@baseFont) solid rgb(237, 112, 152);
			width: 30%;
		span{
			float: left;
		}
		p{
			float: right;
		}
			

		}
	}
}	


/* 内容3 */
.tuijian{
	// position: relative;
	// z-index: -1;
	width: 15rem;
	height: (45rem /@baseFont);
	background-color: #fff;
	
	p{
		font-weight: bolder;
		font-size:(30rem /@baseFont) ;
		padding-left: (20rem /@baseFont);
	}
}


.context {
	//让中间内容置于最下面！！！
	// z-index: -1;
	// position: relative;
	width: (750rem/@baseFont);
	
	//flex-wrap实现弹性盒自动换行
	display: flex;
	flex-wrap: wrap;
	height: (450rem/@baseFont);
	background-color: #fff;
	.view{
		position: relative;
		// padding-left: (10rem/@baseFont);
		width: (100rem/@baseFont);
		// overflow: hidden;
		
		display: inline-block;
			
		flex-grow: 1;
		//防止被挤压
		flex-shrink: 0;
	
	}
	
	.xuanfu{

		height:(50rem/@baseFont) ;
		text-align: center;
		//flex-wrap实现弹性盒自动换行
		display: flex;
		flex-wrap: wrap;
		
		width: 100%;
		left: 0;
		li{
			width: 25%;
		
		}
		li:nth-child(2) span{
			font-weight: bolder;
		}
		span{
			color:rgb(237, 112, 152);
			font-size: (60rem/@baseFont) ;
		}
		p{
			
		}
	}
	
	
}


/* 内容4 */
.gengduo{
	// position: relative;
	// z-index: -1;
	background-color: #fff;
	width: 15rem;
	height: (450rem/@baseFont);
	display: flex;

	
	.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	/* fill:currentColor是什么意思？ 
			          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
			          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
			           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
	fill: currentColor;
	/*  */
	
	}
	.lianxi {
		width: 100%;


	.left{
		
		float: left;
		width: 90%;
		display: flex;
		// justify-content: center;
		align-items: center;
		span{
			padding-right: (20rem/@baseFont);
			color: rgb(237, 112, 152);
			font-size: (70rem/@baseFont);
			// float: left;
		}


	}
	.right{
		width: 10%;
	
		display: flex;
		text-align: center;
		span{
			
			padding-top: (20rem/@baseFont);
		}
	}
	
	
		li{
			height: (80rem/@baseFont);

		}
	}
}




/* footer底部 */
.footer {
	// position: fixed;	
	// /* 固定定位必须有宽度*/
	// width: 15rem;
	// height: (150rem /@baseFont);
	// bottom: 0;
	// background-color: #fff;
	// //文字居中
	// left: 50%;
	// transform: translateX(-50%);
	// overflow: hidden;
	// text-align: center;
	z-index: 3;
	position: relative;
	position: fixed;
	width: 15rem;
	height: (120rem /@baseFont);
	background-color: #fff;
	// bottom: 0;

	bottom: 0;
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	overflow: hidden;
	text-align: center;
	
	.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	/* fill:currentColor是什么意思？ 
			          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
			          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
			           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
	fill: currentColor;
	/*  */

	}
	
	#bnav {
	
		/* fixed相对于浏览器窗口进行定位，正常情况下没有问题，当使用transform:translate(0px,-5px);属性后问题就出现了 */
		/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
		display: flex;
	
	 li:nth-child(1) {
		width: 20%;
	}
	
	 li:nth-child(2) {
		width: 20%;
	}
	
	 li:nth-child(3) {
		width: 20%;
	}
	
	 li:nth-child(4) {
		width: 20%;
	}
	
	 li:nth-child(5) {
		width: 20%;
	}
	
	svg {
		font-size: (70rem /@baseFont);
	
	}
	
	p {
		font-size: (14rem /@baseFont);
		line-height: (50rem /@baseFont);
	
	}
	
	 .footer-nav>.icon:hover {
		color: rgb(237, 112, 152);
	}


	 .active {
		color: rgb(237, 112, 152);
	}
	
	}
	

}
	

	





























